<h1>About Themify Product Filter</h1>
<h3 id="requirments">Requirements:</h3>
<p>Before starting please make sure that you have the following requirements on your site:</p>
<ol>
  <li><a href="https://wordpress.org/plugins/woocommerce/">WooCommerce Plugin</a> - Installed and activated.</li>
  <li>A few products with category, tags, price, and/or attributes.</li>
</ol>
<h3 id="using-wc-product-filter">Using the Themify Product Filter plugin</h3>
<div class="post-video"><iframe src="https://www.youtube.com/embed/Z7My8WsG11w" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
<p>With the Themify Product Filter plugin you can help shoppers easily find products faster on your WooCommerce shop. As soon as you activate this plugin you'll see a &quot;Product Filter&quot;  option appear on your dashboard where you can create your filter templates. All filter options will be linked with the product category, tags, attributes, price, and stock that you've set. After creating the filter template you can then copy and paste the shortcode and place it on any text editor or widget on your site. Below using this plugin make sure to check the requirements above:</p><!--more-->


<p><strong>1. Create a New Product Filter</strong></p>
<p>To start, add a new product filter. Go to your WP Admin &gt; Product Filter &gt; Click Add New. A lightbox will then appear where you can set the parameters of your Product Filter. </p>
<p class="image border"><img alt="adding a new product filter" src="https://themify.me/wp-content/uploads/2016/11/adding-new-product-filter.jpg" /></p>
<p>You'll see the following options:</p>
<ul>
  <li><strong>Form Title</strong>: Input the title of the product filter form.</li>
  <li><strong>Layout</strong>: There are 2 layouts - Vertical and Horizontal (Note: We recommend the vertical for sidebar layouts).</li>
  <li><strong>Empty Fields</strong>: Option to hide a field if it's empty. </li>
  <li><strong>Product Sorting</strong>: Show or hide the ability to sort the products. This is a dropdown selection that'll appear on the upper right corner.</li>
  <li><strong>Product Count</strong>: Show or hide result product count.</li>
  <li><strong>Pagination</strong>: Show or hide the pagination of your products.</li>
  <li><strong>Product Per Page</strong>: Maximum number of products that'll appear on a search result.</li>
  <li><strong>Toggle Field Groups</strong>: Add an option for users to toggle whether to collapse or expand a filter option panel. </li>
  <li><strong>Scroll To Result</strong>: Select to scroll to the result field.</li>
  <li><strong>Result Page Template</strong>:
    <ul>
      <li><strong>Show results on the same page</strong>: means the product results will display on the same page without page reload.</li>
      <li><strong>Show results on a different page</strong>: allows you to select any static Page to display the product results (the product results will display below the page content).</li>
    </ul>
  </li>
</ul>
<p>Now you can drag and drop the modules on your template builder. Where you place the modules in the Builder will be how it'll appear on your site. (For more detail about these modules, please visit our <a href="https://themify.me/docs/wc-product-filter-documentation">Themify Product Filter documentation</a>)</p>
<p><strong>2. Input Shortcode on any Text Editor</strong></p>
<p>After setting up your product filter form. Copy the shortcode and paste it on any text editor.</p>
<p class="image border"><img alt="shortcode for the form" src="https://themify.me/wp-content/uploads/2016/11/shortcode-form.jpg" /></p>
<p>That's it!</p>
<h3>Recommended Themes:</h3>
<ul class="recommended-themes padded">
  <li class="image border"><a href="https://themify.me/themes/ultra"><img src="https://themify.me/wp-content/uploads/2016/10/ecommerce.png" alt="eCommerce skin demos"></a> <strong><a href="https://themify.me/themes/ultra">Ultra - eCommerce Skin</a></strong></li>
  <li class="image border"><a href="https://themify.me/themes/flatshop"><img src="https://themify.me/wp-content/uploads/2016/12/flatshop-thumb.png" alt="Flatshop theme"></a> <strong><a href="https://themify.me/themes/flatshop">Flatshop Theme</a></strong></li>
  <li class="image border"><a href="https://themify.me/themes/parallax"><img src="https://themify.me/wp-content/uploads/2016/12/parallax-thumb.png" alt="Parallax theme"></a> <strong><a href="https://themify.me/themes/parallax">Parallax Theme</a></strong></li>
</ul>
<style>
@media (min-width: 480px) {
	.recommended-themes > li {
		float: left;
		width: 33%;
		box-sizing: border-box;
		padding-left: 20px;
	}
	.recommended-themes > li:first-child {
		padding-left: 0;
	}
	ul.recommended-themes {
		overflow: hidden;
	}
}
.recommended-themes img {
	max-width: 100%;
	height: auto;
}
.recommended-themes strong {
	display: block;
}
</style>